<template>
  <el-dialog
    :title="title"
    :visible.sync="showDialog"
    class="deploy-dialog"
    top="50px !important"
    width="70%"
    :close-on-click-modal="false"
  >
    <el-radio-group v-model="dataType">
      <el-radio-button label="0" v-if="userInfo.userType == 0">
        商户数据权限
      </el-radio-button>
      <el-radio-button label="2" v-if="userInfo.userType == 1">
        店铺数据权限
      </el-radio-button>
      <el-radio-button label="1">景区数据权限</el-radio-button>
      <!-- <el-radio-button v-if="userInfo.userType == 1" label="3">
        酒店数据权限
      </el-radio-button> -->
    </el-radio-group>

    <transition v-if="showDialog" name="fade-transform" mode="out-in">
      <merchant-data v-if="dataType == '0'" :rowData="row" />
      <scenic-data v-if="dataType == '1'" :rowData="row" />
      <shop-data v-if="dataType == '2'" :rowData="row" />
      <hotel-data v-if="dataType == '3'" :rowData="row" />
    </transition>
  </el-dialog>
</template>
<script>
import { getUserInfo } from '@/utils/auth'
import scenicData from './scenic-data.vue'
import merchantData from './merchant-data.vue'
import shopData from './shop-data.vue'
import hotelData from './hotel-data.vue'
/*
userType 用户类型（0：平台用户，1：企业用户）
*/
export default {
  name: 'deploy',
  components: { scenicData, merchantData, shopData, hotelData },
  data () {
    return {
      showDialog: false,
      title: '数据权限配置',
      dataType: '',
      row: null,
      userInfo: getUserInfo()
    }
  },
  watch: {
    showDialog (n) {
      if (!n) {
        this.$emit('closeDialog')
      }
    }
  },
  methods: {
    show (row) {
      this.row = row
      this.row.userType = this.userInfo.userType
      this.dataType = this.userInfo.userType == '0' ? 0 : 2
      this.title = `部门数据权限配置 - ${row.departmentName}`
      this.showDialog = true
    }
  }
}
</script>
<style lang="scss" scoped>
.deploy-dialog {
  :deep(.el-dialog__body) {
    padding: 10px 20px 20px;
  }
  :deep(.el-radio-group) {
    margin-bottom: 20px;
  }
}
</style>
